<template>
  <!-- 车辆通行记录 -->
  <div class="chart-box2">
    <div class="chart-title">车辆通行记录</div>
    <div class="chart-content">
      <ScrollTable :header="tableHeader" :list="data" :config="config" />
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import common from "../../utils/common";
import store from "../../../../store";
import ScrollTable from "../common/ScrollTable.vue";

export default defineComponent({
  name: "CarPassRecord",
  components: { ScrollTable },
  setup() {
    const state = reactive({
      tableHeader: [
        { key: "car_number", title: "车牌号" },
        { key: "time", title: "出/入场时间" },
        { key: "event_text", title: "事件" },
      ],
      data: [],
      config: {
        style: [{ color: common.theme.textGreen }],
      },
    });

    watch(
      () => store.getters.centerControl.Park_parkCarAccessList,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { Park_parkCarAccessList } = store.getters.centerControl;
      if (Park_parkCarAccessList) {
        state.data = Park_parkCarAccessList.map((item) => {
          item.time = item.status == 1 ? item.out_time : item.enter_time;
          return item;
        });
      }
    };

    const init = () => {
      getData();
    };

    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
</style>
